<template>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="账号">
      <el-input v-model="formInline.user" placeholder="账号" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="formInline.pwd" placeholder="密码" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">login</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onOut">out</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { initRouter } from '../server/index'
const router = useRouter()
const route = useRoute()
console.log('route.meta', route.meta)
const formInline = reactive({
  user: '',
  pwd: '',
})

const onSubmit = () => {

  initRouter(formInline.user, formInline.pwd).then((res) => {
    if (res.data.code == 0) {
      console.log('res.data.route', res.data.route)
      const route = res.data.route
      route.forEach((v:any) => {
        router.addRoute({
          path: v.path,
          name: v.name,
          component:()=>import( `./${v.component}`) 
        })
      });
      console.log('router.getRoutes()',router.getRoutes())
    } else {
      alert('账号密码错误')
    }
  })

}
const onOut = () => {
  localStorage.removeItem('user')
}
</script>

<style scoped>
</style>